import React, { Suspense } from 'react'
import {
    BrowserRouter,
    Routes,
    Route,
    Navigate
} from 'react-router-dom'

import { routerType } from '../interface'

// 路由表
import Page from './page'


const Router = () => {

    const mapRouter = (routes: routerType[]) => {
        return routes.map((item: routerType, idx: number) => {
            return item.path ? <Route key={idx} path={item.path} element={item.element}>
                {
                    item.children && mapRouter(item.children)
                }
            </Route> : <Route key={idx} path={item.from} element={<Navigate to={item.to as string}></Navigate>}></Route>
        })
    }

    return <Suspense fallback={<div>加载中，请稍后。。。。</div>}>
        <BrowserRouter>
            <Routes>
                {
                    mapRouter(Page)
                }
            </Routes>
        </BrowserRouter>
    </Suspense>

}

export default Router